.vk-alert {
    --vk-alert-primary: var(--vk-color-primary);
    --vk-alert-success: var(--vk-color-success);
    --vk-alert-info: var(--vk-color-info);
    --vk-alert-danger: var(--vk-color-danger);
    --vk-alert-warning: var(--vk-color-warning);
    --vk-alert-color: var(--vk-color-black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* height: auto; */
    padding: 10px 20px;
    border: 1px solid var(--vk-border-color-light);
    border-radius: 5px;
    color: var(--vk-alert-color);
    margin-bottom: 20px;
}
.vk-alert span {
  margin-left: 8px;
}
.alert-enter-from,.alert-leave-to {
  opacity: 0;
}
.alert-enter-active, .alert-leave-active { transition: opacity 0.5s ease; }
.alert-enter-to , .alert-leave-from {
  opacity: 1;
}
.vk-alert--primary {
  background-color: var( --vk-alert-primary);
  --vk-alert-color:var(--vk-color-white)
}
.vk-alert--primary.is-light {
  --vk-alert-color:var(--vk-color-primary-dark-2);
  --vk-alert-primary:var(--vk-color-primary-light-9)
}
.vk-alert--success {
  background-color: var(--vk-alert-success);
  --vk-alert-color:var(--vk-color-white);

}
.vk-alert--success.is-light {
  --vk-alert-color:var(--vk-color-success-dark-2);
  --vk-alert-success:var(--vk-color-success-light-9)
}
.vk-alert--info {
  --vk-alert-color:var(--vk-color-white);
  background-color: var(--vk-alert-info);
}
.vk-alert--info.is-light {
  --vk-alert-color:var(--vk-color-info-dark-2);
  --vk-alert-info:var(--vk-color-info-light-9)
}
.vk-alert--danger {
  --vk-alert-color:var(--vk-color-white);
  background-color: var(--vk-alert-danger);
}
.vk-alert--danger.is-light {
  --vk-alert-color:var(--vk-color-danger-dark-2);
  --vk-alert-danger:var(--vk-color-danger-light-9)
}
.vk-alert--warning {
  --vk-alert-color:var(--vk-color-white);
  background-color: var(--vk-alert-warning);
}
.vk-alert--warning.is-light {
  --vk-alert-color:var(--vk-color-warning-dark-2);
  --vk-alert-warning:var(--vk-color-warning-light-9)
}